<script setup lang="ts">
import { useChannelStore } from '@/stores/channel'
import type { Channel, ChannelResData } from '@/types'
import axios from 'axios'
import { ref } from 'vue'

// 接收父组件传递过来的参数
// defineProps<{ navId: number }>()
const store = useChannelStore()

const navList = ref<Channel[]>([])
// 获取列表数据
const getData = async () => {
  const res = await axios.request<ChannelResData>({
    url: 'http://geek.itheima.net/v1_0/channels',
    method: 'get'
  })
  console.log(res.data.data.channels)
  navList.value = res.data.data.channels
}
getData()

// const emit = defineEmits<{ (e: 'changeNavId', id: number): void }>()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: store.channelId === item.id }"
        href="javascript:;"
        v-for="item in navList"
        :key="item.id"
        @click="store.changeChannelId(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
